import { useState } from 'react';
import { Card } from './ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/table';
import { Badge } from './ui/badge';
import { Input } from './ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
import { Search, FileDown, Filter } from 'lucide-react';
import { Button } from './ui/button';
import { mockCleaningData } from '../data/mockData';
import type { CleaningData } from '../types';

export function DataView() {
  const [searchTerm, setSearchTerm] = useState('');
  const [buildingFilter, setBuildingFilter] = useState<string>('all');
  const [statusFilter, setStatusFilter] = useState<string>('all');

  const getStatusColor = (status: string) => {
    const colors = {
      '优秀': 'bg-green-100 text-green-800',
      '良好': 'bg-blue-100 text-blue-800',
      '一般': 'bg-yellow-100 text-yellow-800',
      '需改进': 'bg-red-100 text-red-800'
    };
    return colors[status as keyof typeof colors] || 'bg-gray-100 text-gray-800';
  };

  const filterData = (data: CleaningData[], type?: string) => {
    return data.filter(item => {
      const matchesType = !type || item.type === type;
      const matchesSearch = item.location.toLowerCase().includes(searchTerm.toLowerCase()) ||
                           item.cleanerName.toLowerCase().includes(searchTerm.toLowerCase());
      const matchesBuilding = buildingFilter === 'all' || item.building === buildingFilter;
      const matchesStatus = statusFilter === 'all' || item.status === statusFilter;
      
      return matchesType && matchesSearch && matchesBuilding && matchesStatus;
    });
  };

  const DataTable = ({ data }: { data: CleaningData[] }) => (
    <div className="overflow-x-auto">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>位置</TableHead>
            <TableHead>类型</TableHead>
            <TableHead>评分</TableHead>
            <TableHead>状态</TableHead>
            <TableHead>保洁员</TableHead>
            <TableHead>时间</TableHead>
            <TableHead>问题</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {data.length === 0 ? (
            <TableRow>
              <TableCell colSpan={7} className="text-center text-gray-500 py-8">
                暂无数据
              </TableCell>
            </TableRow>
          ) : (
            data.map((item) => (
              <TableRow key={item.id}>
                <TableCell>{item.location}</TableCell>
                <TableCell>
                  <Badge variant="outline">{item.type}</Badge>
                </TableCell>
                <TableCell>
                  <span className={item.score >= 90 ? 'text-green-600' : item.score >= 80 ? 'text-blue-600' : item.score >= 70 ? 'text-yellow-600' : 'text-red-600'}>
                    {item.score}
                  </span>
                </TableCell>
                <TableCell>
                  <Badge className={getStatusColor(item.status)}>
                    {item.status}
                  </Badge>
                </TableCell>
                <TableCell>{item.cleanerName}</TableCell>
                <TableCell className="text-gray-500">{item.timestamp}</TableCell>
                <TableCell>
                  {item.issues && item.issues.length > 0 ? (
                    <span className="text-red-600">{item.issues.join('、')}</span>
                  ) : (
                    <span className="text-green-600">无</span>
                  )}
                </TableCell>
              </TableRow>
            ))
          )}
        </TableBody>
      </Table>
    </div>
  );

  return (
    <div className="space-y-6">
      <div>
        <h2>保洁数据管理</h2>
        <p className="text-gray-500">查看和管理所有保洁采集数据</p>
      </div>

      {/* 筛选工具栏 */}
      <Card className="p-4">
        <div className="flex flex-col md:flex-row gap-4">
          <div className="flex-1 relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
            <Input
              placeholder="搜索位置或保洁员..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10"
            />
          </div>
          <Select value={buildingFilter} onValueChange={setBuildingFilter}>
            <SelectTrigger className="w-full md:w-[150px]">
              <SelectValue placeholder="选择楼栋" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">全部楼栋</SelectItem>
              <SelectItem value="A栋">A栋</SelectItem>
              <SelectItem value="B栋">B栋</SelectItem>
            </SelectContent>
          </Select>
          <Select value={statusFilter} onValueChange={setStatusFilter}>
            <SelectTrigger className="w-full md:w-[150px]">
              <SelectValue placeholder="选择状态" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">全部状态</SelectItem>
              <SelectItem value="优秀">优秀</SelectItem>
              <SelectItem value="良好">良好</SelectItem>
              <SelectItem value="一般">一般</SelectItem>
              <SelectItem value="需改进">需改进</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline" className="gap-2">
            <FileDown className="w-4 h-4" />
            导出数据
          </Button>
        </div>
      </Card>

      {/* 分类数据展示 */}
      <Card>
        <Tabs defaultValue="all" className="w-full">
          <div className="border-b px-6 pt-6">
            <TabsList>
              <TabsTrigger value="all">全部数据</TabsTrigger>
              <TabsTrigger value="卫生间">卫生间</TabsTrigger>
              <TabsTrigger value="地面">地面</TabsTrigger>
              <TabsTrigger value="垃圾桶">垃圾桶</TabsTrigger>
            </TabsList>
          </div>

          <div className="p-6">
            <TabsContent value="all" className="mt-0">
              <DataTable data={filterData(mockCleaningData)} />
            </TabsContent>
            <TabsContent value="卫生间" className="mt-0">
              <DataTable data={filterData(mockCleaningData, '卫生间')} />
            </TabsContent>
            <TabsContent value="地面" className="mt-0">
              <DataTable data={filterData(mockCleaningData, '地面')} />
            </TabsContent>
            <TabsContent value="垃圾桶" className="mt-0">
              <DataTable data={filterData(mockCleaningData, '垃圾桶')} />
            </TabsContent>
          </div>
        </Tabs>
      </Card>
    </div>
  );
}
